<template>
    <div v-loading="loading">
        <div v-if="form.file_path" class="img-contanter">
            <img :src="form.file_path" class="avatar">
            <i class="iconfont ali-close" @click="delBanner"></i>
        </div>
        <div v-else class="banner">
            <el-upload 
                style="float: right;" 
                action="/api/backstage/fileUpload"
                name="file_path" 
                :before-upload="beforeUpload" 
                :on-success='handleHaveSuccess'
                :show-file-list="false"
                >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div>
            <el-form label-width="80px" class="form">
                <el-form-item label="网页链接:">
                    <el-input clearable class="inp" v-model="form.link_url" placeholder="请输入跳转网址"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { banner_delete } from '@/api/banner'
export default {
    data(){
        return {
            loading: false
        }
    },
    props: {
        form: {
            type: Object,
            default: () => { file_path: '' }
        }
    },
    methods: {
        beforeUpload(file){//导入
            this.loading = true;
            let name = file.name.split('.');
            if (name[name.length - 1] === 'png' || name[name.length - 1] === 'jpg' || name[name.length - 1] === 'jpeg') {
                return file
            } else {
                this.$message.error('请上传正确的图片格式!')
                return false
            }
        },
        handleHaveSuccess(res, file, fileList) {
            this.loading = false;
            if (res.status == 100) {
                let url = localStorage.getItem("ossPublicUrl") + '/' + res.data.file_path;
                this.form.file_path = url;
            }else{
                this.$message.warning("上传异常");
            }
        },
        async delBanner() {
            try {
                let res = await this.$confirm('确认删除吗？')
                if (res == 'confirm') {
                    this.delete();
                }
            } catch (error) {
                console.log(error, 'error')
            }
        },
        async delete() {
            if(!this.form.id){
                this.$emit('initForm');
            }else{
                const { data } = await banner_delete({ id: this.form.id, model_id: 2 })
                if (data.status === 100) {
                    this.$message.success("删除成功");
                    this.$emit('initForm');
                }
            }
            this.$emit("initList");
        }
    }
}
</script>
<style lang="scss" scoped>
.banner {
    width: 720px;
    height: 354px;
    background-color: #F2F2F2;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #979797;
    border-radius: 2px;
}
.avatar{
    max-width: 720px;
}
.form {
    margin-top: 20px;
}

.inp {
    width: 630px;
}

.img-contanter {
    position: relative;
    i {
        position: absolute;
        left: 10px;
        top: 10px;
        color: #F56C6C;
        font-size: 20px;
        &:hover {
            cursor: pointer;
        }
    }
}
</style>
